import { Alert } from "antd";
import { Fragment, useEffect } from "react";
import { useSelector } from "react-redux";
import { useParams, useHistory } from "react-router-dom";
import { useTopic } from "../../store/action";
import Details from "./details";
import Replies from "./replies";

export default function Topic() {
    let { id } = useParams();
    let getData = useTopic();
    let history = useHistory();
    let { loading, data, isError, err_msg } = useSelector(
        (state) => state.topic
    );

    useEffect(() => {
        getData(id);
    }, [id]);
    return (
        <div>
            {isError ? (
                <Alert
                    message={"请求出错"}
                    closable
                    type="error"
                    description={
                        <Fragment>
                            <p>{err_msg}</p>
                            <p>点击关闭返回上一步</p>
                        </Fragment>
                    }
                    onClose={() => {
                        history.goBack();
                    }}
                />
            ) : (
                <>
                    <Details data={data} loading={loading} />
                    <Replies data={data.replies} />
                </>
            )}
        </div>
    );
}
